<template>
    <el-form :model="uploadForm" label-width="130px" class="upload-setting">
        <el-form-item label="默认上传方式">
            <el-radio-group v-model="uploadForm.upload_type">
                <el-radio :label="1">对象存储</el-radio>
            </el-radio-group>
        </el-form-item>
        
        <el-form-item label="Bucket">
            <el-input v-model="uploadForm.bucket" placeholder="Bucket" 
                style="width: 400px;"></el-input>
        </el-form-item>
        
        <el-form-item label="ACCESS_KEY">
            <el-input v-model="uploadForm.access_key" placeholder="****************" type="password"
                style="width: 400px;"></el-input>
        </el-form-item>
        
        <el-form-item label="SECRET_KEY">
            <el-input v-model="uploadForm.secret_key" placeholder="****************" type="password"
                style="width: 400px;"></el-input>
        </el-form-item>
        
        <el-form-item label="空间域名">
            <div class="domain-input">
                <el-input v-model="uploadForm.domain" placeholder="空间域名" 
                    style="width: 400px;"></el-input>
                <div class="domain-tip">请补全 http:// 或 https://</div>
            </div>
        </el-form-item>
        
        <el-form-item>
            <el-button color="var(--primary-theme-color)" size="small" type="primary" @click="saveSettings">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const uploadForm = reactive({
    upload_type: 1,
    bucket: '',
    access_key: '',
    secret_key: '',
    domain: ''
})

const saveSettings = () => {
    // 实现保存设置的逻辑
    message({
        message: "保存成功",
        type: "success"
    })
}
</script>

<style lang="scss" scoped>
.upload-setting {
    padding: 20px 0;
    
    .domain-input {
        display: flex;
        flex-direction: column;
        
        .domain-tip {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
    }
    
    .el-button {
        margin-top: 10px;
    }
}
</style>
